<template>
  <div id="editConference">
    <el-descriptions id="conferenceData" class="margin-top" :column="2" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <conference />
            </el-icon>
            会议名
          </div>
        </template>
        <el-input v-model="name"></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <address />
            </el-icon>
            会议地址
          </div>
        </template>
        <el-input v-model="address"></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <startTime />
            </el-icon>
            开始时间
          </div>
        </template>
        <div class="block">
          <el-date-picker
            v-model="startTime"
            type="datetime"
            placeholder="选择开始时间"
            :shortcuts="shortcuts"
            style="width: 100%"
          />
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <endTime />
            </el-icon>
            结束时间
          </div>
        </template>
        <div class="block">
          <el-date-picker
            v-model="endTime"
            type="datetime"
            placeholder="选择开始时间"
            :shortcuts="shortcuts"
            style="width: 100%"
          />
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <comm />
            </el-icon>
            备注
          </div>
        </template>
        <el-input v-model="comm"></el-input>
      </el-descriptions-item>
    </el-descriptions>
    <div id="buttons">
      <el-button type="primary" @click="submit" v-if="isAdmin === 'true'"
        >提交</el-button
      >
    </div>
  </div>
</template>


<script>
import axios from "axios";
import { baseUrl } from "../main.js";
import { show_success_msg, show_error_msg } from "../js/msg.js";
export default {
  data() {
    return {
      baseUrl: baseUrl,
      name: "",
      address: "",
      startTime: new Date,
      endTime: new Date,
      comm: "",
      isAdmin: localStorage.getItem("admin"),
    };
  },
  methods: {
    submit() {
      let formdata = new FormData();
      formdata.append("name", this.name);
      formdata.append("address", this.address);
      formdata.append("startTime", this.startTime.getTime());
      formdata.append("endTime", this.endTime.getTime());
      formdata.append("comm", this.comm);
      axios
        .post(this.baseUrl + "/Conference/addConference", formdata)
        .then((response) => {
          let re_data = response.data;
          if (re_data.status == 200) {
            show_success_msg("新增会议信息成功", "");
            this.cleanInput();
          } else {
            show_error_msg("新增会议信息", re_data.msg);
          }
        })
        .catch((error) => {
          show_error_msg("提交失败", "与服务器通讯异常");
        });
    },
    cleanInput(){
      this.name = "";
      this.address = "";
      this.comm = "";
    }
  },
};
</script>

<style scoped>
#editUser > #userData {
  margin-top: 12px;
}

#buttons {
  margin-top: 2vh;
}
</style>